<template>
  <div v-loading="loading">
    <el-row :gutter="30" class="tool-bar" style="margin-top: 0px;margin-bottom: 10px;">
      <el-col :span="24">
        <el-row :gutter="0">
          <div>
            <span class="item-title">
              系统单号: {{purchase.sn}}
            </span>
            <span class="item-status">
              订单状态:
              <span v-if="purchase.arrivalNum==0" class="red">
               未到货
              </span>
              <span v-if="purchase.arrivalNum>0 &&purchase.orderNum>purchase.arrivalNum" class="red">
               部分到货
              </span>
              <span v-if="purchase.arrivalNum>0 &&purchase.orderNum<=purchase.arrivalNum" class="red">
               全部到货
              </span>
            </span>

            <span class="item-status">
              到货数量: <span style="color:red"> {{purchase.arrivalNum}} </span>
            </span>
          </div>
          <h-purchase-info-display v-model="purchase"/>
        </el-row>
        <el-row>
          <el-button type="primary" @click="create"><i class="fa fa-plus"></i> 添加明细</el-button>
          <el-tooltip placement="top">
            <div slot="content">编辑采购单的内容</div>
            <el-button type="success" @click="editPurcharse"><i
              class="fa fa-edit"></i> 编辑采购单
            </el-button>
          </el-tooltip>


          <el-tooltip placement="top" v-if="purchase.enterNum==0">
            <div slot="content">只有明细为空的时候才能进行删除操作</div>
            <el-button type="danger" @click="deletePurcharse"><i
              class="el-icon-delete"></i> 删除订单
            </el-button>
          </el-tooltip>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <div style="margin-left: 10px;margin-right: 10px;">
        <el-table
          ref="table"
          :data="details"
          border
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="48" align="center" fixed="left">
          </el-table-column>
          <el-table-column
            label="商品信息" min-width="300">
            <template slot-scope="scope">
              <h-good-info-display v-model="scope.row" :admin="true" :displayInfo="true"></h-good-info-display>
            </template>
          </el-table-column>
          <el-table-column label="商品规格" min-width="120">
            <template slot-scope="scope">
              <h-specs-display v-model="scope.row"/>
            </template>
          </el-table-column>
          <el-table-column
            label="售出汇率"
            prop="exchangeRate">
          </el-table-column>
          <el-table-column label="数量信息" min-width="120">
            <template slot-scope="scope">
              <div class="order-num-info">
                <div><span class="label">采购数量:</span> <span> {{scope.row.num}}</span></div>
                <div><span class="label">可售数量:</span> <span class="red"> {{scope.row.stockNum}}</span></div>
                <div><span class="label">库存数量:</span> <span
                  class="red"> {{scope.row.arrivalNum-scope.row.sellNum}}</span></div>
                <div><span class="label">已售数量:</span> <span>{{scope.row.sellNum}} </span></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="价格信息" min-width="180">
            <template slot-scope="scope">
              <div class="order-price-info">
                <div><span class="label">采购单价:</span> <span>  {{scope.row.currency.symbol}}{{scope.row.purchasePrice.toFixed(2)}}</span>
                </div>
                <div><span class="label">商品折扣:</span> <span class="red"> {{scope.row.discount}}%</span>
                </div>
                <div><span class="label">国际运费:</span> <span class="red">{{scope.row.currency.symbol}}{{scope.row.globalFreight}}</span>
                </div>
                <div><span class="label">国内运费:</span> <span class="red">  ￥{{scope.row.freight}}</span></div>
                <div><span class="label">结算汇率:</span> <span>{{scope.row.closeExchangeRate}} </span></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="成本单价" min-width="100"
          >
            <template slot-scope="scope">
              <span class="red"> ￥{{scope.row.unitPrice.toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="销售单价" min-width="100"
          >
            <template slot-scope="scope">
              <span class="red"> ￥{{scope.row.sellPrice.toFixed(2)}}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="总成本" min-width="100">
            <template slot-scope="scope">
              <span class="red">￥{{scope.row.cost.toFixed(2)}}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="是否上架" width="80" align="center">
            <template slot-scope="scope">
              <span class="h-button button--primary" v-if="scope.row.toSell==1">已上架</span>
              <span class="h-button button--danger" v-if="scope.row.toSell==0">未上架</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作" align="center" width="200" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.stockNum>0" type="text" @click="addOrder(scope.$index, scope.row)">添加订单
              </el-button>

              <el-tooltip placement="top">
                <div slot="content">编辑前添加的订单信息不变，新添加订单按新的信息添加</div>
                <el-button type="text" @click="doEdit(scope.$index,scope.row)">
                  编辑
                </el-button>

              </el-tooltip>


              <el-tooltip placement="top" v-if="scope.row.toSell==0&&(scope.row.arrivalNum-scope.row.sellNum)>0">
                <div slot="content">上架后用户就可以自由购买该单的商品了</div>
                <el-button type="text"
                           @click="doSell(scope.$index,scope.row)">上架
                </el-button>
              </el-tooltip>

              <el-tooltip placement="top" v-if="scope.row.sellNum==0">
                <div slot="content">只有当没有添加过订单的时候才能进行删除操作</div>
                <el-button type="text" @click="deleteById(scope.$index, scope.row)"
                           class="red">删除
                </el-button>
              </el-tooltip>


            </template>

          </el-table-column>
        </el-table>
        <div class="h-pagination">
          <div v-if="selected.length>0" class="pagination-tool">
            <el-button type="primary" @click="doArrival" :loading="arrivalLoading">全部已到货</el-button>
          </div>
          <el-pagination
            @size-change="handleCurrentSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="search.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="search.pagination.total">
          </el-pagination>
        </div>
      </div>
    </el-row>
    <create-order :show.sync="createOrder" v-model="purchaseDetail" @success="orderCreated"
                  title="添加新订单"></create-order>
  </div>
</template>
<script>
  import AdminService from 'src/service/admin'
  import CreateOrder from 'src/components/admin/purchase/components/CreateOrder'
  import TableMix from 'src/components/table-mix'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HPurchaseInfoDisplay from 'src/components/admin/purchase/components/PurchaseInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'

  export default {
    name: 'HPurchaseDetail',
    components: {CreateOrder, HGoodInfoDisplay, HPurchaseInfoDisplay, HSpecsDisplay},
    mixins: [TableMix],
    data() {
      return {
        createOrder: false,
        purchase: {},
        details: [],
        selected: [],
        search: {
          purchaseId: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          orderBy: '(num-sell_num)>0 desc,id desc'
        },
        purchaseDetail: {},
        loading: false,
        arrivalLoading: false
      }
    },
    methods: {
      doArrival: function () {
        const me = this
        me.$confirm('此操作将会把所有的订单的货物状态置为已到货且不可逆操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          const ids = me.selected.map(d => {
            return d.id
          })
          AdminService.purchaseDetailAllArrival({
            ids: ids,
            status: 1,
            needReturn: false
          }).then(data => {
            if (data != null) {
              me.$message.success('修改采购单到货状态成功!')
              setTimeout(function () {
                window.location.reload()
              }, 200)
            }
          })
        })
      },
      doSell: function (index, data) {
        const me = this
        me.$confirm('此操作将会把该单的商品对所有用户开放售卖, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          AdminService.purchaseDetailToSell({
            ids: [data.id],
            status: 1,
            needReturn: false
          }).then(data => {
            if (data != null) {
              me.$message.success('商品上架成功!')
              me.getDetails()
            }
          })
        })
      },
      handleSelectionChange: function (v) {
        this.selected = v
      },
      specDatas: function (data) {
        if (data != null) {
          if (data.specs != undefined && data.specs != null) {
            if (data.specs.datas != null) {
              return data.specs.datas
            }
          }
        }
        return []
      },
      orderCreated: function (v) {
        this.createOrder = false
        this.getDetails()
      },
      editPurcharse: function () {
        this.$router.push('/admin/purchase/purchases/' + this.purchase.id + '/edit.html')
      },
      deletePurcharse: function () {
        const me = this
        me.$confirm('此操作将永久删除该条数据包括商品详情, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          AdminService.purchaseDelete(this.purchase.id).then(data => {
            if (data != null) {
              me.$router.push('/admin/purchase/purchases.html')
              me.$message.success('删除采购单成功!')
            }
          })
        })
      },
      doEdit: function (index, data) {
        this.$router.push('/admin/purchase/puchasedetail/' + data.id + '/edit.html')
      },
      addOrder: function (index, data) {
        this.purchaseDetail = data
        this.createOrder = true
      },
      deleteById: function (index, data) {
        const me = this
        me.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          confirmButtonClass: 'el-button--danger',
          type: 'info'
        }).then(() => {
          AdminService.purchaseDetailDelete(data.id).then(data => {
            if (data != null) {
              me.$message.success('删除成功!')
              me.details.splice(index, 1)
              me.getData(me.search.purchaseId)
            }
          })
        })
      },
      getData: function (id) {
        const me = this
        if (id != null && id != undefined) {
          AdminService.purchaseById(id).then(data => {
            if (data != null) {
              me.purchase = data.datas[0]
            }
          })
        }
      },
      getDetails: function () {
        const me = this
        me.loading = true
        AdminService.searchPurchaseDetail(me.search).then(data => {
          if (data != null) {
            me.details = data.datas
            me.search.pagination = data.pagination
          }
          me.loading = false
        })
      },
      handleCurrentSizeChange: function (size) {
        this.search.pagination.limit = size
        this.getDetails()
      },
      handleCurrentChange: function (item) {
        this.search.pagination.page = item
        this.getDetails()
      },
      create: function () {
        this.$router.push('/admin/purchase/puchasedetail/' + this.purchase.id + '/create.html')
      }
    },
    beforeMount: function () {
      const id = this.$route.params.id
      //this.initTalbeHeight(360)
      this.getData(id)
      this.search.purchaseId = id
      this.search.pagination.page = 1
      this.getDetails()
    },
    beforeRouteUpdate: function (to, from, next) {
      const me = this
      me.getData(to.params.id)
      me.search.purchaseId = to.params.id
      me.search.pagination.page = 1
      me.getDetails()
      next()
    }
  }
</script>
